import Vue from 'vue'
import Vuex from 'vuex'

// 导入子模块对象
import userModule from './modules/user'

// 导入 vuex 数据持久化模块
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)
const store = new Vuex.Store({
  // 注册子模块对象
  modules: {
    // 模块名: 模块对象
    user: userModule
  },
  plugins: [
    // 使用插件，就是把模块下的数据刷新不丢失
    // 内部默认使用的是 localStorage 存储数据的
    // 这个插件内部做了这么几件事：
    // 1. 自动把vuex中的数据在本地存一份
    // 2. 当刷新页面的时候，会自动把从本地中取值赋值给vuex
    // 3. 当vuex中的数据变了时候，自动把最新的数据同步到本地存储中（让本地存储中的数据和vuex数据保持一致）
    // 注意：今后在代码中只需要关注vuex的数据，这个插件会自动把vuex中的数据同步到本地存储
    createPersistedState({
      // 哪些子模块下的数据需要持久化
      paths: ['user'],
      // 存到本地的键名
      key: 'm-toutiao-23'
    })
  ]
})

export default store

// 面试题：
// 为什么vuex需要同时用vuex和本地存储共同管理？
